<template>
  <div class="userList back-white">
    <div>
      <page-title>账号列表</page-title> 
      </div>
    <el-container>
      <el-main>
        <el-form> 
          <el-form-item><el-button type="primary" @click="openDialog(0)">添加账号</el-button></el-form-item>
        </el-form>
        <div class="x-item x-item-none back-white">
            <el-table border :data="adminList"> 
              <el-table-column label="账号" prop="account"></el-table-column>
              <el-table-column label="姓名" prop="name"></el-table-column> 
              <el-table-column label="电话" prop="phone"></el-table-column> 
              <el-table-column label="原始密码" prop="password"></el-table-column>   
              <el-table-column label="操作" prop="status">
                <template slot-scope="scope">
                  <el-button type="text" size="small" v-if="scope.row.state == 1" @click="toggleAccount(0,scope.row.account)">启用</el-button>
                  <el-button type="text" size="small" v-if="scope.row.state == 0" @click="toggleAccount(1,scope.row.account)"  class="redColor" >禁用</el-button> 
                  <el-button type="text" size="small" @click="toEdit(1,scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          <div class="pdtb075 tc">
            <el-pagination
              background
              layout="prev, pager, next"
              @current-change="pageChange"
              :total="pageCount">
            </el-pagination>
          </div>
          </div>
      </el-main>
    </el-container>
    <!--修改详情-->
    <el-dialog :title="clickBtnIndex==0?'添加账号':'修改账号信息'"  center :visible.sync="dialogFormVisible" width="645px">
        <el-form :model="editUserInfo">
          <el-form-item label="账号" label-width="100px">
              <el-input class="edit-input" v-model="editUserInfo.account" autocomplete="off" placeholder="请输入账号"></el-input>
          </el-form-item> 
          <el-form-item label="密码" label-width="100px">
              <el-input class="edit-input" v-model="editUserInfo.password" autocomplete="off" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="姓名" label-width="100px">
              <el-input class="edit-input" v-model="editUserInfo.name" autocomplete="off" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话" label-width="100px">
              <el-input class="edit-input" v-model="editUserInfo.phone" autocomplete="off" placeholder="请输入电话"></el-input>
          </el-form-item> 
          <el-form-item label="权限" label-width="100px">
              <el-checkbox class="check-box" label="用户管理" v-model="user_manage"></el-checkbox>
              <el-checkbox class="check-box" label="相册管理" v-model="photo_manage"></el-checkbox>
              <el-checkbox class="check-box" label="账号管理" v-model="account_manage"></el-checkbox> 
              <el-checkbox class="check-box" label="数据管理" v-model="data_manage"></el-checkbox>
              <el-checkbox class="check-box" label="聊天" v-model="chat"></el-checkbox> 
          </el-form-item>  
          
        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="adminSave">{{clickBtnIndex==0?'提 交':'保 存'}}</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return { 
        clickBtnIndex:0,
        adminList: [{
          account: '',
          account_manage: '',
          chat: '',
          data_manage: '',
          name: '',
          password: '',
          phone: "",
          photo_manage: 1,
          state: 0,
          user_manage: 1,
        }], //用户列表
        pageCount: 0, //总数
        curPage:1, //当前页数 
        dialogFormVisible:false,
        editUserInfo:{
          account:'',
          name:'',
          phone:'',
          password:'',  
        },
        account_manage:false,
        data_manage:false,
        chat:false,
        user_manage:false,
        photo_manage:false,
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){ //获取用户列表数据
        let vm = this;
        let body={
          page:vm.curPage, //当前页数
          size:30,  //一页显示多少条 
        }
        api.getAdminList(body).then(res=>{
          if(res.data.code==300000){
            vm.adminList=res.data.data.data; 
            vm.pageCount=res.data.data.info.total;
          }
        })
      },
      pageChange(e){
        this.curPage = e;
        this.getData();
      },
      toggleAccount(status,id){ //启用/禁用账号
      let vm = this;
        let body = {
          account:id,
          status:status
        };
        api.forbiddenAdmin(body).then((res) => {
          if(res.data.code == 300000){
            vm.getData();
          } 
        })
      },
      toEdit(val,item){ //跳转到编辑
        this.clickBtnIndex=val;
        this.dialogFormVisible=true;
        this.editUserInfo={
          account:item.account,
          name:item.name,
          phone:item.phone,
          password:item.password, 
        };
        this.account_manage=item.account_manage==0?false:true;
        this.data_manage=item.data_manage==0?false:true;
        this.chat=item.chat==0?false:true;
        this.user_manage=item.user_manage==0?false:true;
        this.photo_manage=item.photo_manage==0?false:true;
      },
      openDialog(val){
        this.dialogFormVisible=true;
        this.clickBtnIndex=val;
        this.editUserInfo={
          account:'',
          name:'',
          phone:'',
          password:'', 
        };
        this.account_manage= false;
        this.data_manage= false;
        this.chat= false;
        this.user_manage= false;
        this.photo_manage= false;
      }, 
      adminSave(){
        let vm = this;
        let body = {
          account:vm.editUserInfo.account,
          name:vm.editUserInfo.name,
          phone:vm.editUserInfo.phone,
          password:vm.editUserInfo.password,  
          account_manage:vm.account_manage?1:0,
          data_manage:vm.data_manage?1:0,
          chat:vm.chat?1:0,
          user_manage:vm.user_manage?1:0,
          photo_manage:vm.photo_manage?1:0,
        };
        if(vm.clickBtnIndex==0){
          api.addAdmin(body).then(res=>{
            if(res.data.code==300000){
              vm.dialogFormVisible=false;
              vm.getData();
            }
          })
        }else{
          api.alterAdmin(body).then(res=>{
            if(res.data.code==300000){
              vm.dialogFormVisible=false;
              vm.getData();
            }
          })
        }
      },
    }
  }
</script>
<style lang="scss" scoped>
 
    .edit-input{
        width:410px !important;
    }
    .redColor{
      color:red !important;
    }
    .check-box{
      &:last-child{
        margin-left:0 !important;
      }
    }
</style>